<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1474698_th64rwphgke.css">
    <link rel="stylesheet" href="../../css/common.css">
    <title>入佳境详情</title>
    <style>
        html,body{
            background-color: #FAF8F4;
        }
        .header{
            background: transparent;
        }
        .header .back{
           width:.6rem;
           height: .6rem;
           background-color: rgba(0, 0, 0, .6);
           border-radius: 50%;
           margin-left: .3rem;
           margin-top: .26rem;
        }
        .header .back .iconfont{
            font-size: .3rem;
            color: #fff;
            position: relative;
            left: -0.02rem;
            top: 0.02rem;
        }
        .main{
            padding-top: 0!important;
        }
        .banner{
            width: 100%;
            height: 7.5rem;
        }
        .info-card{
            width: 100%;
            height: auto;
            background-color: #fff;
            padding: 0 .3rem;
            margin-bottom: .1rem;
        }
        .info-card .title{
            width: 100%;
            padding: .28rem 0;
            font-size:.36rem;
            font-family:PingFang SC;
            font-weight:bold;
            color:rgba(51,51,51,1);
        }
        .info-card .user{
            width: 100%;
            
        }
        .info-card .user .heading{
            width: .5rem;
            height: .5rem;
            border-radius: 50%;
            margin: 0;
            margin-right: .15rem;
        }
        .info-card .user .name{
            font-size:.28rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(51,51,51,1);
        }
        .info-card .btm{
            width: 100%;
            height: auto;
            padding: .2rem 0;
        }
        .info-card .btm .time{
            font-size:.22rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
        .info-card .btm .item{
            height: auto;
            margin-left: .7rem;
          
        }
        .info-card .btm .item img{
            width: .26rem;
            height: auto;
            margin: 0;
            margin-right: .11rem;
        }
        .info-card .btm .item span{
            font-size:.24rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
        .info-dtl{
            width: 100%;
            height: auto;
            background-color: #fff;
            padding: 0 .3rem;

        }
        .info-dtl .menu{
            width: 100%;
            height: auto;
        }
        .info-dtl .menu .item{
            width: 1.4rem;
            line-height: 1.16rem;
            font-size:.32rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(51,51,51,1);
            margin-right: .41rem;
            text-align: center;
        }
        .info-dtl .menu .item.active{
            color:rgba(251,92,89,1);
            font-weight:bold;
            background-image: url('../../image/tabbg.png');
            background-size: 60%;
            background-repeat: no-repeat;
            background-position: 50% 50%;
        }
        .dtl{
            padding-bottom: .2rem;
        }
        .eval-list{
            width: 100%;
            height: auto;
        }
        .eval-list .item{
            width: 100%;
            margin-top: .4rem;
        }
        .eval-list .item .left{
            width: .8rem;
            height: .8rem;
            border-radius: 50%;
            overflow: hidden;
        }
        .eval-list .item .right {
            margin-left: .2rem;
            padding-bottom: .35rem;
            border-bottom: 1px solid #E8E8E8;
        }
        .eval-list .item:last-child .right{
            border-bottom: 0;
        }
        .eval-list .item .right .name{
            font-size:.32rem;
            font-family:PingFang SC;
            font-weight:bold;
            color:rgba(51,51,51,1);
            margin-bottom: .1rem;
        }
        .eval-list .item .right .dtl-ms{
            font-size:.28rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(153,153,153,1);
            line-height:.4rem;
        }
        .eval-list .item .right .time{
            font-size:.24rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(204,204,204,1);
        }
        .eval-list .more{
            line-height: 1.02rem;
            text-align: center;
            font-size:.24rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
        .footer{
            padding: 0 .31rem;
            background-color: #fff;
            border-top: 1px solid #E8E8E8;
        }
        .footer .ipt{
            width: 5.6rem;
            height: .68rem;
            background:rgba(238,239,239,1);
            border-radius:.1rem;
            padding: 0 .3rem;
            font-size:.28rem;
            font-family:PingFang SC;
            font-weight:400;
            color: #333;
        }
        .footer .ipt::placeholder{
            color:rgba(158,164,169,1);
        }
        .footer .ipt::-webkit-input-placeholder{
            color:rgba(158,164,169,1);
        }
        .footer .btn{
            width:1rem;
            height:.58rem;
            font-size:.28rem;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(255,255,255,1);
        }
        .list-box{
            overflow: hidden;
            background-color: #fff;
            margin-top: .1rem;
        }
        .list-box .title{
            text-align: left; 
            padding: 0 .3rem;
            font-size:.32rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(51,51,51,1);
        }
        .list-item{
            margin-bottom: .3rem;
            box-shadow:0px 0px 13px 0px rgba(248,238,224,1);
        }
        .list-item .left{
            border-radius: .1rem;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="root" class="elehide">
        <header class="header flex align-items space-between">
            <div class="back fn-ctr">
                <i class="iconfont iconfanhuianniu"></i>
            </div>
            <div class="middle"></div>
            <div class="right"></div>
        </header>
        <div class="main">
            <div class="banner">
                <img src="../../image/index_banner.png" alt="">
            </div>
            <div class="info-card">
                <div class="title">油畫基礎課程</div>
                <div class="user flex aling-items flex-start">
                    <img class="heading" src="../../image/heading.png" alt="">
                    <span class="name">不吃魚的貓</span>
                </div>
                <div class="btm flex align-items space-between">
                    <div class="time">2019-03-08</div>
                    <div class="right flex1 flex align-items flex-end">
                        <div class="item flex align-items flex-start">
                            <img src="../../image/watcher.png" alt="">
                            <span>2354</span>
                        </div>
                        <div class="item flex align-items flex-start">
                            <img src="../../image/collect.png" alt="">
                            <span>2354</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="info-dtl">
                <div class="menu flex align-items flex-start">
                    <div class="item active">課程詳情</div>
                </div>
                <div class="dtl">
                    详尽讲解与示范工具认识与应用，基本造型知识点的解析与实操练习（如构图，形体结构，光影，空间，深入塑造等），对单个静物与简单静物组合的学习与示范。
                </div>
            </div>
        </div>
    </div>
    <script src="../../js/api.js"></script>
    <script src="../../js/vue-components.js"></script>
    <script src="../../js/vue.js"></script>
    <script src="../../js/common.js"></script>
    <script>
          



    </script>
</body>
</html> 